<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>即时通讯界面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/client.css}">
    <style>
        #msg-container {
            height: calc(100vh - 550px);
        }
    </style>
</head>
<body>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;">
        <legend style="margin-left: 40%;">即时通讯界面</legend>
    </fieldset>
    <!--消息记录-->
    <div class="layui-row">
        <div class="layui-col-xs12">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>消息记录</legend>
            </fieldset>
            <div class="layui-tab layui-tab-card" id="msg-container">
                <div id="msgDiv" class="scroller">

                </div>
            </div>
        </div>
    </div>
    <!--用户信息-->
    <div class="layui-row">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote">用户信息</blockquote>
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户Id</label>
                        <div class="layui-input-inline">
                            <input id="userId" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">接收人Id</label>
                        <div class="layui-input-inline">
                            <input id="toUserId" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-bg-blue" onclick="start()" type="button">建立连接</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--消息发送区-->
    <div class="layui-row">
        <div class="layui-col-xs12">
            <blockquote class="layui-elem-quote">消息发送区</blockquote>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">消息</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" id="msg"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="sendMsg()">发送消息</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<!--layui-->
<script type="application/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="application/javascript" th:src="@{/javascript/socket.js}"></script>

<script>
    var ws = null;
    var layer = null;
    var $msgDiv = $("#msgDiv");

    $(function () {
        ui.init();
    });

    var ui = {
        /**
         * 初始化layui
         */
        init: () => {
            layui.use(['layer'], function () {
                layer = layui.layer;
            });
        }
    }

    /**
     * 建立Ws连接
     * @returns {boolean}
     */
    function start() {
        var userId = $("#userId").val();
        if (userId === '' || userId == null) {
            layer.msg('请输入您的用户Id', {icon: 5, time: 1500})
            return false;
        }
        socket.url = "" + window.location.protocol + "//" + window.location.host + "/chat/" + userId;
        /**
         * 重写消息接受方法
         * @param msg
         */
        socket.onMessage = (msg) => {
            msg = JSON.parse(msg.data)
            $msgDiv.append('' +
                '<div class="other-msg-container">' +
                '   <img class="left-img" src="/images/left.png">' +
                '   <div class="other-msg msg-common">' +
                '       <p class="student">用户名：' + msg.sender + '</p><p class="chat">' + msg.msg + '</p>' +
                '   </div>' +
                '</div>');
            scroolBottom();
        }
        socket.start();
    }

    /**
     * 发送消息
     */
    function sendMsg() {
        var msg = $("#msg").val();
        if (msg === '' || msg == null) {
            layer.msg('消息内容不能为空', {icon: 5, time: 1500});
            return;
        }
        var receiver = $("#toUserId").val();
        if (receiver === '' || receiver == null) {
            layer.msg('请输入接收人', {icon: 5, time: 1500});
            return;
        }
        var msgObj = {
            "receiver": receiver,
            "msg": msg
        };
        socket.sendMsg(msgObj, () => {
            $msgDiv.append('' +
                '<div class="my-msg-container">' +
                '   <img class="right-img" src="/images/right.png">' +
                '   <div class="my-msg msg-common">' +
                '       <p class="student">用户名：' + $("#userId").val() + '</p><p class="chat">' + msgObj.msg + '</p>' +
                '   </div>' +
                '</div>');
            scroolBottom();
            $("#msg").val('')
        })
    }

    /**
     * 滚动至最底部
     */
    function scroolBottom() {
        var $div = document.getElementById("msgDiv");
        $div.scrollTop = $div.scrollHeight;
    }

    function speak(_text) {
        if (!!window.SpeechSynthesisUtterance) {
            console.log("请使用其他浏览器！")
        }
        window.speechSynthesis.cancel()
        var utterThis = new window.SpeechSynthesisUtterance();
        console.log(window.speechSynthesis.getVoices())
        utterThis.text = _text;
        utterThis.lang = 'zh';//汉语
        utterThis.rate = 0.7;//语速
        window.speechSynthesis.speak(utterThis)
    }

    window.onbeforeunload = function () {
        socket.disConnect();
    }
</script>
</body>
</html>
